<template>
  <!-- 搜索框 -->
  <el-card style="height: 120px">
    <el-form :model="queryForm" :inline="true" class="form">
      <el-form-item label="订单ID:">
        <el-input
            v-model="queryForm.queryOrderId"
            placeholder="请输入订单ID"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名:">
        <el-input
            v-model="queryForm.queryUserName"
            placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址:">
        <el-input
            v-model="queryForm.queryAddress"
            placeholder="地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单状态:">
        <el-select
            v-model="queryForm.QueryOrderStatus"
            placeholder="请选择订单状态"
            style="width: 200px"
            clearable
        >
          <el-option label="全部" :value="0"></el-option>
          <el-option label="待处理" :value="1"></el-option>
          <el-option label="已完成" :value="2"></el-option>
          <el-option label="已取消" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付状态:">
        <el-select
            v-model="queryForm.QueryPaymentStatus"
            placeholder="请选择支付状态"
            style="width: 200px"
            clearable
        >
          <el-option label="全部" :value="0"></el-option>
          <el-option label="支付中" :value="1"></el-option>
          <el-option label="支付成功" :value="2"></el-option>
          <el-option label="支付失败" :value="3"></el-option>
          <el-option label="已退款" :value="4"></el-option>
          <el-option label="部分退款" :value="5"></el-option>
          <el-option label="支付取消" :value="6"></el-option>
          <el-option label="支付超时" :value="7"></el-option>
          <el-option label="支付关闭" :value="8"></el-option>
          <el-option label="支付异常" :value="9"></el-option>
          <el-option label="待支付" :value="10"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="search">
          搜索
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 添加订单和批量删除 -->
  <el-card style="margin: 10px 0">
    <!-- table展示订单信息 -->
    <el-table style="margin: 10px 0" border :data="orderTableData">
      <el-table-column
          label="订单ID"
          align="center"
          prop="orderId"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="用户名"
          align="center"
          prop="username"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="地址"
          align="center"
          prop="addressDetail"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="总金额"
          align="center"
          prop="totalPrice"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="支付方式" align="center" prop="paymentMethod" show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="row.paymentMethod === 1">支付宝</span>
          <span v-else-if="row.paymentMethod === 2">微信</span>
          <span v-else-if="row.paymentMethod === 3">其他</span>
          <span v-else>未知支付方式</span>
        </template>
      </el-table-column>
      <el-table-column label="支付状态" align="center" prop="paymentStatus" show-overflow-tooltip>
        <template #default="{ row }">
          <div style="display: flex; align-items: center;">
            <!-- 根据状态显示图标 -->
            <el-icon v-if="row.paymentStatus === 1" style="color: #e6a23c;">
              <Loading/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 2" style="color: #67c23a;">
              <SuccessFilled/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 3" style="color: #f56c6c;">
              <CircleCloseFilled/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 4" style="color: #909399;">
              <Refresh/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 5" style="color: #e6a23c;">
              <RefreshRight/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 6" style="color: #f56c6c;">
              <Close/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 7" style="color: #f56c6c;">
              <Timer/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 8" style="color: #909399;">
              <Switch/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 9" style="color: #f56c6c;">
              <Warning/>
            </el-icon>
            <el-icon v-else-if="row.paymentStatus === 10" style="color: #909399;">
              <Clock/>
            </el-icon>

            <!-- 显示状态文字 -->
            <span style="margin-left: 8px;">
        {{ formatPaymentStatus(row.paymentStatus) }}
      </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="orderStatus" show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="row.orderStatus === 1">待处理</span>
          <span v-else-if="row.orderStatus === 2">已发货</span>
          <span v-else-if="row.orderStatus === 3">已完成</span>
          <span v-else>未知状态</span>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          align="center"
          prop="createdAt"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column
          label="支付时间"
          align="center"
          prop="paymentTime"
          show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="180px" align="center">
        <template #default="{ row }">
          <!-- 详情按钮 -->
          <el-tooltip effect="dark" content="详情" placement="top">
            <el-button
                type="primary"
                size="small"
                icon="View"
                @click="handleDetail(row.orderId)"
            ></el-button>
          </el-tooltip>

          <!-- 发布按钮 -->
          <el-tooltip effect="dark" content="发货" placement="top">
            <el-button
                type="success"
                size="small"
                icon="Check"
                @click="handlePublish(row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @current-change="findAll"
        @size-change="handler"
    />
  </el-card>

  <!-- 弹窗：展示订单详情 -->
  <el-dialog v-model="orderItemDialogVisible" title="订单详情" width="50%">
    <el-table :data="orderItemList" border>
      <el-table-column label="菜品名称" prop="dishName" align="center"></el-table-column>
      <el-table-column label="菜品描述" prop="dishDescription" align="center"></el-table-column>
      <el-table-column
          label="图片"
          align="center"
          prop="dishImageUrl"
      >
        <template #default="{ row }">
          <el-image
              style="width: 100px; height: 100px"
              :preview-src-list="[row.dishImageUrl]"
              :src="row.dishImageUrl"
              fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="单价" prop="price" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="数量" prop="quantity" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="总价" prop="totalPrice" align="center" show-overflow-tooltip></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, nextTick} from "vue";
import {ElFormItem, ElMessage, ElMessageBox} from "element-plus";
import {
  CircleCloseFilled,
  Clock, Close,
  Loading,
  Refresh,
  RefreshRight,
  SuccessFilled, Switch, Timer,
  Warning
} from "@element-plus/icons-vue";
import {apiGet, apiPost} from "@/utils/api";

//搜索表单数据
let queryForm = reactive({
  queryOrderId: "",
  queryUserName: "",
  queryAddress: "",
  QueryOrderStatus: 0,
  QueryPaymentStatus: 0,
});

//默认页码
let pageNo = ref<number>(1);
//一页展示几条数据
let pageSize = ref<number>(5);
//总个数
let total = ref<number>(0);
//存储全部订单的数组
let orderTableData = ref([]);
// 收货地址弹窗的显示与隐藏
const orderItemDialogVisible = ref(false);

// 收货地址列表
const orderItemList = ref<Array<any>>([]);
//获取全部订单信息
let findAll = async (pager = 1) => {
  //收集当前页码
  pageNo.value = pager;
  let parameter = {
    page: pageNo.value,
    limit: pageSize.value,
    orderId: queryForm.queryOrderId,
    username: queryForm.queryUserName,
    addressDetail: queryForm.queryAddress,
    orderStatus: queryForm.QueryOrderStatus,
    paymentStatus: queryForm.QueryPaymentStatus,
  };
  //获取表单数据
  let {data} = await apiGet("/order/findAll", parameter);
  total.value = data.count;
  orderTableData.value = data.data;
};

//分页器下拉菜单的自定义事件的回调
const handler = () => {
  findAll();
};

//搜索按钮的回调
const search = () => {
  findAll();
};

//查看订单详情
const handleDetail = async (orderId: number) => {
  let {data} = await apiGet("/orderItem/getAllByOrderId", {orderId});
  orderItemList.value = data;
  // 显示弹窗
  orderItemDialogVisible.value = true
};
//订单修改状态
const handlePublish = async (row: any) => {
  if (row.orderStatus !== 1) {
    ElMessage.warning("该订单已发货或者已经完成，请勿重复操作");
    return;
  }
  await apiPost("/order/edit", {orderId: row.orderId, orderStatus: 2});
  await findAll();
};

// 格式化支付状态
const formatPaymentStatus = (paymentStatus: number): string => {
  switch (paymentStatus) {
    case 1:
      return "支付中";
    case 2:
      return "支付成功";
    case 3:
      return "支付失败";
    case 4:
      return "已退款";
    case 5:
      return "部分退款";
    case 6:
      return "支付取消";
    case 7:
      return "支付超时";
    case 8:
      return "支付关闭";
    case 9:
      return "支付异常";
    case 10:
      return "待支付";
    default:
      return "未知状态";
  }
};

//组件挂载完毕
onMounted(() => {
  findAll();
});
</script>

<style scoped></style>